import React, { Component } from 'react'
// import { reqgetbanner, reqgetcate, reqgetindexgoods, reqgetnew, reqgetgroupon, reqgetseckill, reqgetcountdown } from '../../http/api'
import Header from '../../components/Header/Header'
import Banner from './components/Banner/Banner'
import Cate from './components/Cate/Cate'
import Goods from './components/Goods/Goods'
import NewComers from './components/NewComers/NewComers'
import Group from './components/Group/Group'
import SecKill from './components/SecKill/SecKill'
import { connect } from "react-redux";
import { bindActionCreators } from "redux";


import { actions, getBanner, getCate, getGoods,getN,getGetgroup,getSeckill,getNewcomers } from "../../store/modules/home";

 class Home extends Component {
  constructor() {
    super()
    // 初始化数据
    this.state = {
      time: {
        hour: 0,
        minute: 0,
        second: 0
      }
    }
  }
  

  componentDidMount() {
    let {
      home: { reqCate,reqBanner,reqGoods,reqNewcomers, reqSeckill ,reqGetgroup},
    } = this.props;
    reqCate();
    reqBanner()
    reqGoods()
    reqGetgroup()
    reqNewcomers()
    reqSeckill()

      // 页面挂载完成启动定时器
      const end = new Date('2022-07-08 08:00').getTime()
      this.countFun(end);

  }
 
  
  
  
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  // 封装一个倒计时函数
  countFun = (end) => {
    let now_time = +new Date();
    var remaining = end - now_time;
    console.log(remaining);
    this.timer = setInterval(() => {
      //防止出现负数
      if (remaining > 1000) {
        remaining -= 1000;
        let hour = Math.floor((remaining / 1000 / 3600) % 24);
        let minute = Math.floor((remaining / 1000 / 60) % 60);
        let second = Math.floor(remaining / 1000 % 60);

        this.setState({
          time:{
            ...this.state.time,
            hour: hour < 10 ? "0" + hour : hour,
            minute: minute < 10 ? "0" + minute : minute,
            second: second < 10 ? "0" + second : second
          }
        })
      } else {
        clearInterval(this.timer);
      }
    }, 1000);
  }
 

  

  render() {
    let {time} = this.state
    let {cate,banner,goods,seckill,n,getgroup,newcomers,home:{changeN}} = this.props
 
    return (
      <div>
        {/* 头部 */}
        <Header back title="首页"></Header>
        {/* 搜索 */}
        {/* <ToSearch></ToSearch> */}
        {/* 商品分类 */}
        {/* 秒杀 */}
        <SecKill seckill={seckill} time={time}></SecKill>
        <Cate cate={cate}></Cate>
        {/* banner */}
        <Banner banner={banner} ></Banner>
        {/* 新人专享 */}
        <NewComers newcomers={newcomers}></NewComers>
        {/* Goods商品 */}
        <Goods goods={goods}  n={n} onChangeN={n=>changeN(n)}></Goods>
        {/* 万人团 */}
        <Group getgroup={getgroup}></Group>


      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    cate:getCate(state),
    banner:getBanner(state),
    goods:getGoods(state),
     newcomers:getNewcomers(state),
    n:getN(state),
    getgroup:getGetgroup(state),
    seckill:getSeckill(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    home: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);